<!doctype html>
<html>
<head>	
<meta charset="utf-8">
<link rel="stylesheet" href="css/1.css">
<title>林梓瀚个人简介</title>
	<style>
		body{background:url(img/background.jpg);background-repeat: no-repeat;image:100%;}
		.left{width:15%;background:#97EBF5;margin-left: 1%;margin-top: 1%;float: left;border: 2px solid #575555;border-radius:1%;overflow: hidden;}
		.right{width:80%;height: 800px;background:#97EBF5;margin-left: 2.5%;margin-top: 1%;float:left;border: 2px solid #575555;border-radius:0.5%;}
		img{width:80%;}
		.title{width:40%;margin: 0 auto;padding-top: 5%;padding-left:5%;}
		
		.box1{margin-top:8%;margin-left:4%;margin-right:4%; border-bottom:2px solid #1B0BEB;overflow:hidden;}
		.box2{margin-top:2%;padding-left:5%;padding-right:5%;}
		.box3{border-top:2px solid #1B0BEB;}
		.box4{display:inline-block;width:100%; }
		
		.fonttitle2{font-size:0.8rem;font-weight: 700;margin:0 auto;margin-top: 5%;padding-left:26%;}
		.fonttitle3{display:inline-block;font-size:0.8rem;font-weight:700;}
		.righttitle{font-weight:700;}
		ul{display:inline-block;}
		li{display:inline-block;}
	 
	
    
@media (max-width: 902px){.left{width:135px;background:#97EBF5;margin-left: 1%;margin-top: 1%;float: left;border: 2px solid #575555;border-radius:1%;overflow: hidden;}
	                      .right{width:70%;background:#97EBF5;margin-left: 2.5%;margin-top: 1%;float:left;border: 2px solid #575555;border-radius:0.5%;}
}
    
@media (max-width: 578px){.left{width:135px;background:#97EBF5;margin-left: 1%;margin-top: 1%;float: left;border: 2px solid #575555;border-radius:1%;overflow: hidden;}
	                      .right{width:60%;background:#97EBF5;margin-left: 2.5%;margin-top: 1%;float:left;border: 2px solid #575555;border-radius:0.5%;}
}
    
@media (max-width: 433px){.left{width:135px;background:#97EBF5;margin-left: 1%;margin-top: 1%;float: left;border: 2px solid #575555;border-radius:1%;overflow: hidden;}
	                      .right{width:80%;background:#97EBF5;margin-left: 2.5%;margin-top: 1%;float:left;border: 2px solid #575555;border-radius:0.5%;}
}
    
@media (max-width<343px){.left{width:100%;background:#97EBF5;margin-left: 1%;margin-top: 1%;border: 2px solid #575555;border-radius:1%;overflow: hidden;}
	                      .right{width:100%;background:#97EBF5;margin-left: 2.5%;margin-top: 1%;border: 2px solid #575555;border-radius:0.5%;}

}
    
@media (max-width: 169px){.left{width:120px;background:#97EBF5;margin-left: 1%;margin-top: 1%;border: 2px solid #575555;border-radius:1%;overflow: hidden;}
	                      .right{width:120px;background:#97EBF5;margin-left: 2.5%;margin-top: 1%;border: 2px solid #575555;border-radius:0.5%;}
}
    </style>
</head>

<body>
	<div class="left">
		<div class="title"><img src="img/personal.jpg" alt="title"></div>
	       <div id="message">林梓瀚</div>
		   <div id="message">中山大学南方学院</div>
		<div class="box1">
	    	<div class="fonttitle3">基本信息:</div></div>
		 <ul>
                    <li>
                        <label1>姓名</label1>
                        <label2>林梓瀚</label2>
                    </li>
			  <br>
                    <li>
                        <label1>性别</label1>
                        <label2>男</label2>
                    </li>
			  <br>
                    <li>
                        <label1>学历</label1>
                        <label2>就读中</label2>
                    </li>
			 <br>
			        <li>
                        <label1>年龄</label1>
                        <label2>20岁</label2>
                    </li>
                </ul>
		<div class="box1">
	    	<div class="fonttitle3">联系方式:</div></div>
		 <ul>
                    <li>
                        <label1>手机</label1>
                        <label2><a href="https://www.baidu.com/">17819155117</a></label2>
                    </li>
			  <br>
                    <li>
                        <label1>QQ</label1>
                        <label2><a href="https://www.baidu.com/">1362627784</a></label2>
                    </li>
			  <br>
                    <li>
                        <label1>微信</label1>
                        <label2><a href="https://www.baidu.com/">lin61998</a></label2>
                    </li>
                </ul>
		<div class="box1">
	    	<div class="fonttitle3">技能点:</div></div>
		 <ul>
                  <li>
                        <label>电脑</label>
					  <br>
                        <progress value="75" max="100"></progress>
                    </li>
                    <li>
                        <label>运动</label>
					  <br>
                        <progress value="50" max="100"></progress>
                    </li>
                    <li>
                        <label>学习</label>
					  <br>
                        <progress value="75" max="100"></progress>
                    </li>
                   
                </ul>
	</div>
	<div class="right">
		
		 <div class="box2">
		    <div class="righttitle">教育经历：</div>
			   <div class="box3">
				   <div class="box4">•<a href="http://jieyang011595.11467.com/">凤湖小学</a></div><div id="one">2016.9-2012.6</div>
				   <div class="box4">•<a href="http://661484.guangdong.8671.net/">三侨中学</a></div><div id="one">2012.9-2015.6</div>
				   <div class="box4">•<a href="http://www.mhzx.net/">棉湖中学</a></div><div id="one">2015.9-2018.6</div>
		  		   <div class="box4">•<a href="http://www.nfu.edu.cn/">中山大学南方学院</a></div><div id="one">2018.9-如今</div>
			 </div>
	</div>  
		<br>
		<div class="box2">
		    <div class="righttitle">目标：</div>
			   <div class="box3">
		          <p>•学有所成</p>
				   <p>•多参赛获奖</p>
				   <p>•多方面磨练自己</p>
				   <p>•去想去的地方</p>
		  		 </div>
			
	</div>  
		<br>
	<div class="box2">
		    <div class="righttitle">自我评价：</div>
			   <div class="box3">
		          <p>•过于懒惰</p>
				   <p>•不够活跃</p>
				   <p>•缺乏锻炼</p>
		  		 </div>
</body>
</html>